import { useState, useEffect, } from 'react'
import { Space, Table, message, Button, Popconfirm } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import axios from 'axios'
import "../index.less"
import AddCommodity from './AddCommodity';

export default function CommodityManagement() {
    const columns: ColumnsType<any> = [
        {
            title: '商品id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '商铺名称',
            dataIndex: 'shopName',
            key: 'shopName',
        },
        {
            title: '宝贝描述',
            dataIndex: 'babyDescription',
            key: 'babyDescription',
        },
        {
            title: '卖家服务',
            dataIndex: 'sellerService',
            key: 'sellerService',
        },
        {
            title: '物流服务',
            dataIndex: 'logisticsService',
            key: 'logisticsService',
        },
        {
            title: '商品名称',
            dataIndex: 'commodityName',
            key: 'commodityName',
        },
        {
            title: '销量',
            dataIndex: 'sales',
            key: 'sales',
        },
        {
            title: '原价',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '现价',
            dataIndex: 'nowPrice',
            key: 'nowPrice',
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <div>
                    <Space size="middle">
                        <Popconfirm title="确认删除吗？" onConfirm={() => deleteData(record.id)}>
                            <Button>删除</Button>
                        </Popconfirm>
                    </Space>
                </div>
            ),
        },
    ];
    const [nullValue, setNullValue] = useState({
        id: undefined,
        category: undefined,
        shopName: undefined,
        shopPicture: undefined,
        babyDescription: undefined,
        sellerService: undefined,
        logisticsService: undefined,
        shopIMG: undefined,
        commodityName: undefined,
        sales: undefined,
        price: undefined,
        nowPrice: undefined,
        detail: undefined,
        detailIMG: undefined,
        comments: undefined,
    });
    const [messageApi, contextHolder] = message.useMessage();

    const [info, setInfo] = useState<any>([])

    useEffect(() => {
        // 在组件挂载完成后调用 query 方法
        query();
    }, []);

    useEffect(() => {
        // 监听 info 的变化，当 info 变化时，强制组件重新渲染
        setInfo(() => info);
    }, [info]);

    // 查询这里是接口返回有延迟
    const query = () => {
        let tempData: any
        axios.get("http://localhost:8080/api/commodityManagement").then((response) => {
            if (response.data.result) {
                // tempData = JSON.parse(JSON.stringify(response.data.result));
                tempData = response.data.result
                tempData.map((item: any, index: number) => {
                    item.key = `index${index}`
                })
                setInfo(tempData);
            }
        });
    }
    const deleteData = (id: any) => {
        let params = {
            id: id
        }
        axios.post("http://localhost:8080/api/deleteDetail", params).then((response) => {
            if (response.status === 200) {
                messageApi.open({
                    type: 'success',
                    content: '删除成功！',
                });
            }
        }).catch((err) => {
            messageApi.open({
                type: 'error',
                content: err.message,
            });
        });
    }
    return (
        <div className='commodity'>
            <div className="buttons">
                <AddCommodity className="button" info={nullValue} chooseNum={'0'} text={"新增"} />
                <Button className="button" onClick={query}>刷新</Button>
            </div>
            <Table columns={columns} dataSource={info} />
        </div>
    )
}